<script setup lang="ts">
import '../../../assets/icon/iconfont.js'
import { getTime } from '@/utils/time'
import { baseImgPath } from '@/utils/env'
import type { articleData } from '@/utils/interface'
import { useRouter } from 'vue-router'
import { highlightKeyword } from '@/utils/searchHighlight'
const props = defineProps({
    articleList: {
        type: Array as () => articleData[],
        default: () => [],
    },
    isChangeSmall: {
        type: Boolean,
        default: false
    },
    currentIndex: {
        type: Number,
        default: 0
    },
    searchTerm: {
        type: String,
        default: ''
    }
})

const router = useRouter();


const goToGalleryDetail = (id: number) => {
    router.push({
        name: 'galleryDetail',
        params: { id }
    })
}

// 高亮处理函数
const getHighlightedText = (text: string, keyword: string) => {
    console.log(text, keyword);
    if (!keyword.trim()) return text;
    return highlightKeyword(text, keyword);
}


</script>

<template>
    <div v-for="(item, index) in props.articleList" :key="index" @click="goToGalleryDetail(item.id)" class="relative group  rounded-3xl overflow-hidden shadow-lg mb-10
        lg:w-[900px] lg:h-[350px] 
        md:w-[470px] md:h-[220px]
        sm:w-[300px] sm:h-[180px]">
        <div class="flex w-full h-full">
            <div class="relative sm:w-2/3 lg:w-3/4 h-full">
                <!-- 图库封面背景层 -->
                <img :src="`${baseImgPath}/${item.cover}`" alt=""
                    class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" />
                <!-- 右侧渐变淡出层 -->
                <div class="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-white"></div>
                <!-- 右上角斜角切边区域 -->
                <div class="absolute top-0 right-0 w-120 h-full bg-white/90 clip-path-triangle-right"></div>
            </div>
            <!-- 图库详情内容 -->
            <div class="relative sm:w-1/3 lg:w-1/4 bg-white h-full z-10 flex flex-col justify-center items-center">
                <div class="space-y-2">
                    <h1 class="textColor-1 transition-colors duration-300 line-clamp-3
                    lg:text-2xl lg:line-clamp-3
                    md:text-lg md:line-clamp-2
                    sm:text-base sm:line-clamp-1"
                        v-html="getHighlightedText(item.title, props.searchTerm)">
                    </h1>
                    <p class="textColor-2 transition-colors duration-300
                        lg:text-xl
                        md:text-base
                        sm:text-xs">
                        发布于{{ getTime(item.created_at) }}
                    </p>
                    <div class="flex items-center cursor-pointer">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-pinglun"></use>
                        </svg>
                        <p class="text-xs lg:text-base">{{ item.comment }} 评论</p>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <div v-for="(tag, index) in item.label" :key="tag" :class="[
                            'inline-block px-2 py-1 rounded-lg textColor-1 text-sm',
                            index % 3 === 0 ? 'bg-sky-500/30' :
                                index % 3 === 1 ? 'bg-yellow-300/30' :
                                    'bg-red-500/30',
                                    'sm:block sm:text-xs',
                                    'md:block md:text-xs',
                                    'lg:block lg:text-sm'
                        ]">
                            {{ tag }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.icon--large {
    width: 2em;
    height: 2em;
}

.icon--xl {
    width: 3em;
    height: 3em;
}

.clip-path-triangle-right {
    clip-path: polygon(100% 0, 100% 100%, 80% 0);
}
</style>
